<template>
	<div class="workshop-config">
		<el-card>
			<div class="toolbar">
				<el-input v-model="keyword" placeholder="搜索编号/名称/负责人" clearable style="width:220px" />
				<el-button type="primary" @click="openDialog()">新增</el-button>
			</div>
			<el-table :data="filteredData" border size="small" row-key="code">
				<el-table-column prop="code" label="编号" width="110" />
				<el-table-column prop="name" label="名称" width="140" />
				<el-table-column prop="type" label="类型" width="100" />
				<el-table-column prop="parent" label="所属上级" width="120" />
				<el-table-column prop="manager" label="负责人" width="100" />
				<el-table-column prop="status" label="状态" width="80">
					<template #default="scope">
						<el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialog.visible" :title="dialog.editIndex >= 0 ? '编辑' : '新增'" width="400px">
			<el-form :model="dialog.data" label-width="78px">
				<el-form-item label="编号">
					<el-input v-model="dialog.data.code" />
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="dialog.data.name" />
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="dialog.data.type" placeholder="请选择类型">
						<el-option label="产线" value="产线" />
						<el-option label="车间" value="车间" />
						<el-option label="工段" value="工段" />
					</el-select>
				</el-form-item>
				<el-form-item label="所属上级">
					<el-input v-model="dialog.data.parent" />
				</el-form-item>
				<el-form-item label="负责人">
					<el-input v-model="dialog.data.manager" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="dialog.data.status">
						<el-option label="启用" value="启用" />
						<el-option label="停用" value="停用" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dialog.data.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveRow">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 15条三级结构模拟数据
const tableData = ref([
	{ code: 'L001', name: '固体制剂线', type: '产线', parent: '', manager: '张三', status: '启用', remark: '主力口服制剂产线' },
	{ code: 'L002', name: '注射剂线', type: '产线', parent: '', manager: '李四', status: '启用', remark: '核心注射剂产线' },
	{ code: 'W101', name: '一车间', type: '车间', parent: '固体制剂线', manager: '王五', status: '启用', remark: '自动化程度高' },
	{ code: 'W102', name: '二车间', type: '车间', parent: '注射剂线', manager: '赵六', status: '启用', remark: 'GMP验证完成' },
	{ code: 'W103', name: '前处理车间', type: '车间', parent: '固体制剂线', manager: '周伟', status: '启用', remark: '原辅料前处理' },
	{ code: 'S201', name: '投料工段', type: '工段', parent: '一车间', manager: '张伟', status: '启用', remark: '关键原料加料' },
	{ code: 'S202', name: '混合工段', type: '工段', parent: '一车间', manager: '李健', status: '启用', remark: '多种物料均匀混合' },
	{ code: 'S203', name: '制粒工段', type: '工段', parent: '一车间', manager: '王刚', status: '启用', remark: '颗粒制备工序' },
	{ code: 'S204', name: '压片工段', type: '工段', parent: '一车间', manager: '吴强', status: '启用', remark: '高效双出片机' },
	{ code: 'S205', name: '包装工段', type: '工段', parent: '二车间', manager: '赵亮', status: '启用', remark: '自动化包装流水线' },
	{ code: 'S206', name: '检验工段', type: '工段', parent: '二车间', manager: '周丽', status: '启用', remark: '在线检验、抽检并行' },
	{ code: 'S207', name: '灯检工段', type: '工段', parent: '二车间', manager: '陈思', status: '启用', remark: '全自动可视检测设备' },
	{ code: 'S208', name: '灭菌工段', type: '工段', parent: '二车间', manager: '刘超', status: '启用', remark: '高温高压灭菌' },
	{ code: 'S209', name: '配液工段', type: '工段', parent: '前处理车间', manager: '韩松', status: '启用', remark: '自动配液系统' },
	{ code: 'S210', name: '清洗工段', type: '工段', parent: '前处理车间', manager: '刘峰', status: '启用', remark: 'CIP/SIP清洗一体化' }
])


const keyword = ref('')
const filteredData = computed(() => {
	if (!keyword.value) return tableData.value
	return tableData.value.filter(
		d => d.code.includes(keyword.value) || d.name.includes(keyword.value) || d.manager.includes(keyword.value)
	)
})

// 新增/编辑弹窗
const dialog = reactive({
	visible: false,
	data: { code: '', name: '', type: '', parent: '', manager: '', status: '启用', remark: '' },
	editIndex: -1
})

function openDialog(row) {
	if (row) {
		dialog.data = { ...row }
		dialog.editIndex = tableData.value.findIndex(d => d.code === row.code)
	} else {
		dialog.data = { code: '', name: '', type: '', parent: '', manager: '', status: '启用', remark: '' }
		dialog.editIndex = -1
	}
	dialog.visible = true
}

function saveRow() {
	if (dialog.editIndex >= 0) {
		tableData.value[dialog.editIndex] = { ...dialog.data }
	} else {
		tableData.value.unshift({ ...dialog.data })
	}
	dialog.visible = false
}

function removeRow(idx) {
	tableData.value.splice(idx, 1)
}
</script>

<style scoped>
.workshop-config {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
